<template>
    <div class="gnerv-personal">
        <el-tabs tab-position="left">
            <el-tab-pane label="基本设置">
                <el-row>
                    <el-col :span="12">
                        <el-form ref="form" :model="userDetailedForm" label-width="130px">
                            <el-form-item label="用户名">
                                <el-input v-model="userDetailedForm.username" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="固定电话">
                                <el-input v-model="userDetailedForm.telephone"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号">
                                <el-input v-model="userDetailedForm.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="电子邮箱">
                                <el-input v-model="userDetailedForm.email"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-select v-model="userDetailedForm.gender" placeholder="请选择">
                                    <el-option label="男" value="1"></el-option>
                                    <el-option label="女" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="生日">
                                <el-date-picker
                                        v-model="userDetailedForm.birthday"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="住址">
                                <el-input v-model="userDetailedForm.address"></el-input>
                            </el-form-item>
                            <el-form-item label="介绍">
                                <el-input type="textarea" :rows="5"
                                          v-model="userDetailedForm.introduction"
                                          show-word-limit
                                          maxlength="200"
                                          resize="false">
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="saveUserInfo">保存</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <!--                    <el-col :span="8" style="margin-left: 100px;">-->
                    <!--                        <el-upload-->
                    <!--                                class="avatar-uploader"-->
                    <!--                                action="https://jsonplaceholder.typicode.com/posts/"-->
                    <!--                                :show-file-list="false"-->
                    <!--                                :on-success="handleAvatarSuccess"-->
                    <!--                                :before-upload="beforeAvatarUpload">-->
                    <!--                            <el-avatar :src="imageUrl" :size="200"></el-avatar>-->
                    <!--                        </el-upload>-->
                    <!--                    </el-col>-->
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="密码管理">
                <el-form ref="form" :model="passwordForm" label-width="130px">
                    <el-form-item label="原密码">
                        <el-input v-model="passwordForm.oldPassWord"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input v-model="passwordForm.newPassWord"></el-input>
                    </el-form-item>
                    <el-form-item label="重复新密码">
                        <el-input v-model="passwordForm.checkNew"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updatePassword">保存</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {updatePersonal, selectCurrentUser, updatePassword} from "../../../../api/platform/personal";

    export default {
        name: "Personal",
        data() {
            return {
                userDetailedForm: {},
                passwordForm: {
                    oldPassWord: "",
                    newPassWord: "",
                    checkNew: "",
                },
                configForm: {},
                imageUrl: ""
            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            selectPersonal() {
                selectCurrentUser().then(response => {
                    this.userDetailedForm = response.data.user
                }).catch(error => {
                    console.log(error)
                })
            },
            saveUserInfo() {
                updatePersonal(this.userDetailedForm).then(response => {
                    this.selectPersonal();
                }).catch(error => {
                    console.log(error)
                })
            },
            updatePassword() {
                if (this.passwordForm.newPassWord !== this.passwordForm.checkNew) {
                    this.$message.error("两次输入密码不相同！")
                }else {
                    updatePassword(this.passwordForm).then(response => {
                        if (response.code == 200){
                            this.$message.success("密码修改成功！")
                            this.$router.push({path: "/"});
                        }
                    }).catch(error => {
                        console.log(error)
                        this.$message.error(error);
                    })
                }
            },
        },
        created() {
            this.selectPersonal();
        },
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

</style>